import React from 'react'
import style from './index.module.scss'
import countUrl from '../../../static/count.png'
import personUrl from '../../../static/person.png'
import todayPersonUrl from '../../../static/todayPerson.png'
import todayCountUrl from '../../../static/todayCount.png'
import ListTitle from '../../../components/SystemPrivileges/ListTitle'
import RoleList from '../../../components/SystemPrivileges/RoleList'
import { Space, Switch } from 'antd';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux'
import Bread from '../../../components/Bread'

// 表头
const columns = [{
    title: '成员账号',
    dataIndex: 'member_account',
},
{
    title: '客服昵称',
    dataIndex: 'service_name',
},
{
    title: '手机号',
    dataIndex: 'service_phone',
},
{
    title: 'QQ号',
    dataIndex: 'service_qq',
},
{
    title: '添加时间',
    dataIndex: 'service_add_time',
},
{
    title: '最后登录',
    dataIndex: 'service_last_login',
},
{
    title: '是否启用',
    dataIndex: 'is_enable',
    render: (text, record) => (
        <>
            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={record.is_enable} />
        </>
    )
},
{
    title: '操作',
    key: 'action',
    render: (text, record) => (
        <Space>
            <Link to={{
                pathname: '/home/afterloan/addwarning',
                loanafter_warning_id: record.loanafter_warning_id,
                state: 1
            }}>查看记录</Link>
            <a>编辑</a>
            <a>删除</a>
        </Space>
    )
}]

export default function ServiceManage() {
    const serviceList = useSelector(state => state.systemRoleStore.serviceList)
    return (
        <div className='service-manage'>
            <Bread bread_title1="系统权限" bread_title2="客服管理" />
            <div className={style.header}>
                <div className={style.header_item}>
                    <div style={{ marginLeft: 20 }}>
                        <img src={countUrl} />
                    </div>
                    <div className={style.header_text}>
                        <span>历史接待次数</span>
                        <span style={{ fontSize: 18, marginTop: 5 }}>200</span>
                    </div>
                </div>
                <div className={style.header_item}>
                    <div style={{ marginLeft: 20 }}>
                        <img src={personUrl} />
                    </div>
                    <div className={style.header_text}>
                        <span>历史接待人数</span>
                        <span style={{ fontSize: 18, marginTop: 5 }}>200</span>
                    </div>
                </div>
                <div className={style.header_item}>
                    <div style={{ marginLeft: 20 }}>
                        <img src={todayCountUrl} />
                    </div>
                    <div className={style.header_text}>
                        <span>今日接待次数</span>
                        <span style={{ fontSize: 18, marginTop: 5 }}>200</span>
                    </div>
                </div>                <div className={style.header_item}>
                    <div style={{ marginLeft: 20 }}>
                        <img src={todayPersonUrl} />
                    </div>
                    <div className={style.header_text}>
                        <span>今日接待人数</span>
                        <span style={{ fontSize: 18, marginTop: 5 }}>200</span>
                    </div>
                </div>
            </div>

            <ListTitle />
            <RoleList columns={columns} data={serviceList || []} />
        </div>
    )
}
